/*
  学习目标：不可变数据
  本质：React不允许直接修改state的值, 不能用会会改变原始数据的方法,如: push concat
  推荐: 新值覆盖旧值
  记忆: 🔔在React中引起界面变化唯一的方法就是setState
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 100,
    list: [1, 2, 3],
  };

  handleAdd = () => {
    // ✅ 使用新值覆盖旧值
    // this.setState({ count: this.state.count + 1 });

    // ✅
    this.setState({
      list: [...this.state.list, 4],
    });

    // console.log('this.state.count  ----->  ', this.state.count);
    // ❌ 不能直接修改state的值
    // this.state.count++;

    // this.state.list.push(4);

    // ❌ 会导致修改原始数据都不能用
    // this.setState({ list: this.state.list });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <h2>{this.state.list}</h2>
        <button onClick={this.handleAdd}>点我</button>
      </div>
    );
  }
}
